<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
     <%--@author luliang--%>
    <head> 

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

        <title>三阶段电影系统在线选座</title>

        <meta name="keywords" content="jQuery在线选座,jQuery选座系统" />

        <meta name="description" content="jquery.seat-charts是一款适合电影票、高铁票的在线选座插件。" />

        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/front-style/css/jq22.css" />

        <style type="text/css">

            .front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}

            .booking_area {float: right;position: relative;width:200px;height: 450px; }

            .booking_area h3 {margin: 5px 5px 0 0;font-size: 16px;}

            .booking_area p{line-height:26px; font-size:16px; color:#999}

            .booking_area p span{color:#666}

            div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}

            div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

            div.seatCharts-row {height: 35px;}

            div.seatCharts-seat.available {background-color: #B9DEA0;}

            div.seatCharts-seat.focused {background-color: #76B474;border: none;}

            div.seatCharts-seat.selected {background-color: #E6CAC4;}

            div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}

            div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}

            div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}

            ul.seatCharts-legendList {padding-left: 0px;}

            .seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}

            span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}

            .checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}

            #seats_chose {max-height: 150px;overflow-y: auto;overflow-x:-moz-scrollbars-none;width: 200px;}

            #seats_chose li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="demo clearfix">

                <!---左边座位列表----->

                <div id="seat_area" class="seatCharts-container" tabindex="0">

                    <div class="front">屏幕</div>
                    <div id="showSeats">

                    </div>
                </div>

                <!---右边选座信息----->

                <div class="booking_area">

                    <p>电影：<span id="movieName"></span></p>

                    <p>时间：<span id="showDate"></span></p>

                    <p>座位：点击删除</p>
                    <ul id="seats_chose">
                        <%--<li id="cart-item-2_5">22</li>--%>
                        <%--<li id="cart-item">22</li>--%>
                    </ul>
                    <p>票数：<span id="tickects_num"></span></p>
                    <p>总价：<b>￥<span id="total_price"></span></b></p>
                    <input type="button" class="btn" id="buyTickets" value="确定购买"/>
                    <input type="button" class="btn" id="goBack" value="返回上层"/>
                    <p id="errorMsg" style="color: red"></p>
                    <div id="legend"></div>

                </div>

            </div>

        </div>

        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

        <script type="text/javascript" src="${pageContext.request.contextPath}/front-style/js/jquery.seat-charts.min.js"></script>
    </body>
<script>
    var count=0;
    var price=0;
    var showsNo=${requestScope.showsNo};
    var movie_no=0;
    $(function(){
        //清空座位选择
        $("#seats_chose").empty();
        $("#errorMsg").text("");
        //遍历座位
        $.ajax({
            async:false,
            url:"${pageContext.request.contextPath}/PayController/getCountSeat",
            type:"get",
            data:{showNo:showsNo},
            dataType:"json",
            success:function(result){
                var seats=parseInt(result.cinemas.cinema_seat);
                var content="";
               for(var i=1;i<=seats;i++){
                   if(i%10==0){
                       content+=" <div id=\"1_"+i+"\" role=\"checkbox\" aria-checked=\"false\" focusable=\"true\" tabindex=\"-1\" class=\"seatCharts-seat seatCharts-cell available\" onclick=\"getSeat(this)\">"+i+"</div>\n" +
                           "                    </div>";
                   }
                   if(i%10==1){
                       content+=" <div class=\"seatCharts-row\">\n" +
                           "                        <div class=\"seatCharts-cell seatCharts-space\">"+(parseInt(i/10)+1)+"</div>\n" +
                           "                        <div id=\"1_"+i+"\" role=\"checkbox\" aria-checked=\"false\" focusable=\"true\" tabindex=\"-1\" class=\"seatCharts-seat seatCharts-cell available\" onclick=\"getSeat(this)\">"+i+"</div>";
                   }
                   if(i!=1 & i%10!=0 & i%10!=1){
                       content+="<div id=\"1_"+i+"\" role=\"checkbox\" aria-checked=\"false\" focusable=\"true\" tabindex=\"-1\" class=\"seatCharts-seat seatCharts-cell available\" onclick=\"getSeat(this)\">"+i+"</div>";
                   }
                   if(i%10!=0 & i==seats){
                       content+="</div>";
                   }
               }
               $("#showSeats").html(content);
               $("#movieName").text(result.movies.movieName);
                price=result.movies.moviePrice;
                movie_no=result.movies.movieNo;
                /*var times=new Date(result.showing_date);*/
                $("#showDate").text(result.showing_date.substring(0,result.showing_date.length-2));
            },error:function(){
            }
        });

        //遍历已经售出的座位号
       $.ajax({
            async:false,
            url:"${pageContext.request.contextPath}/PayController/getOrders",
            type:"get",
            data:{showNo:showsNo},
            dataType:"json",
            success:function(result){
                $.each(result,function(n,order){
                    var ids="#1_"+order.order_seatno;
                    console.log("遍历出ids"+ids);
                    $(ids).attr("class","seatCharts-seat seatCharts-cell unavailable");
                })
            },error:function(){
            }
        });
    });
    //座位的选择
    function getSeat(obj) {
        $("#errorMsg").text("");
        var a=$(obj).text();
        var sid=$(obj).attr("id");
        if( $(obj).attr("class")=="seatCharts-seat seatCharts-cell available"){
            /*alert("测试用的弹窗,选择的座位号:"+a+"--"+sid);*/
        $("#seats_chose").append("<li id=\"cart-item"+sid+"\" name=\""+sid+"\"  onclick=\"delSeat(this)\">"+a+"</li>")
        $(obj).attr("class","seatCharts-seat seatCharts-cell selected")
            count+=1;
        $("#total_price").text(count*price);
        $("#tickects_num").text(count);
        }
    }
    //删除选择
    function delSeat(obj){
        var sid=$(obj).attr("name");
        /*alert(sid);*/
        $(obj).remove();
        $("#"+sid+"").attr("class","seatCharts-seat seatCharts-cell available");
        count-=1;
        $("#total_price").text(count*price);
        $("#tickects_num").text(count);
    }

    //购买
    $("#buyTickets").click(function(){
        var userNo=${sessionScope.userinfo.user_no};
        if(count>0){
            var list=[];
            //alert("数组的值"+list+",数组的长度是"+list.length);
            for(var a=0;a<count;a++){
                //list[a]=$("#seats_chose").find("li:nth-child("+(a*1+1)+")").text();
               //alert("第a个值"+list[a]);
                var orderseatno=$("#seats_chose").find("li:nth-child("+(a*1+1)+")").text();
                var user_no=userNo;

                var orders={order_seatno:orderseatno,user_no:userNo,showing_no:showsNo};
                list[a]=orders;
            };
            //var jsonList=JSON.stringify(list);
            var movieName=$("#movieName").text();
            var totalPrice=$("#total_price").text();
            //alert(showsNo+","+userNo);
            //console.log(jsonList);
           /* var jsonDate={
                showNo:showsNo,
                seatList:jsonList,
                user_no:userNo
            };*/
            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath}/PayController/addOrder",
                type:"GET",
                contentType:"application/json",
                data:{list:JSON.stringify(list)},
                dataType:"json",
                success:function(result){
                    if (result==true){

                        location.href="${pageContext.request.contextPath}/duanxin/sendsms?smss="+movieName+"&count="+count;
                        //location.href="${pageContext.request.contextPath}/PayController/doPay?total="+$("#total_price").text()+"&showNo=1&count="+count+"&movieName="+ movieName;
                    }else{
                        $("#errorMsg").text("错误提示:选座失败");
                    }
                },error:function(){
                }
               });
            //数据集合&seatList="+jsonList+"
            //
        }else{
            $("#errorMsg").text("错误提示:请先选座");
        }
    });

    //返回
    $("#goBack").click(function () {
        location.href="${pageContext.request.contextPath}/PayController/goMoviesJsp?movieNo="+movie_no;
    });

</script>

</html>





